<template>
  <div class="szSource-container">
    <div class="src_container">
      <div class="parse">
        <div class="szpost-container">
          <div class="item">
            <div class="item-list">
              <div class="icon">
                <i class="el-icon-view"></i>
              </div>
              <div class="count">{{ countDTO.readTotal }}</div>
            </div>
          </div>
          <div class="item">
            <div class="item-list">
              <div class="icon">
                <i class="el-icon-chat-dot-round"></i>
              </div>
              <div class="count">{{ countDTO.commentTotal }}</div>
            </div>
          </div>
          <div class="item">
            <div class="item-list" @click="changeCollectFlag()">
              <div class="icon">
                <i
                  class="el-icon-star-off"
                  style="color: rgb(0, 195, 255)"
                  v-show="collectFlag"
                ></i>
                <i class="el-icon-star-off" v-show="!collectFlag"></i>
              </div>
              <div class="count">{{ countDTO.collectTotal }}</div>
            </div>
          </div>
          <div class="item">
            <div
              class="item-list"
              style="border: none"
              @click="changeLikeFlag()"
            >
              <div class="icon">
                <i
                  class="el-icon-s-opportunity"
                  style="color: rgb(0, 195, 255)"
                  v-show="likeFlag"
                ></i>
                <i class="el-icon-s-opportunity" v-show="!likeFlag"></i>
              </div>
              <div class="count">{{ countDTO.likeTotal }}</div>
            </div>
          </div>
        </div>
      </div>
      <div class="detail">
        <div>
          <sourceContainer
            :postData="postData"
            :datas="datas"
            :countDTO="countDTO"
            :mouduleId="mouduleId"
          >
          </sourceContainer>
        </div>
        <report></report>
        <!-- 帖子内容 -->
        <div class="comments_container">
          <!-- 评论内容 -->
          <sourceComments> </sourceComments>
        </div>
      </div>
      <div class="header">
        <div class="header-container">
          <div class="header-pic">
            <router-link
              :to="{
                name: targetUserRoute,
                query: {
                  id: userDTO.userId,
                },
              }"
              target="_blank"
            >
              <div class="pic">
                <div class="pic-conatiner">
                  <img
                    src="@/assets/szptImages/images/builderHeader.png"
                    alt=""
                    srcset=""
                    v-if="!userDTO.avatar"
                  />
                  <img
                    :src="userDTO.avatar"
                    alt=""
                    srcset=""
                    v-if="userDTO.avatar"
                  />
                </div>
              </div>
            </router-link>
          </div>
          <div class="name-attend">
            <div class="name">
              <router-link
                :to="{
                  name: targetUserRoute,
                  query: {
                    id: userDTO.userId,
                  },
                }"
                target="_blank"
              >
                {{ userName }}
              </router-link>
            </div>
            <div class="attend" v-if="showFocusBtn">
              <div
                class="attend-btn"
                v-show="!focusFlag"
                @click="changeFocusFlag(userDTO.userId)"
              >
                关注
              </div>
              <div
                class="attend-btn-al"
                v-show="focusFlag"
                @click="changeFocusFlag(userDTO.userId)"
              >
                已关注
              </div>
            </div>
          </div>
        </div>
        <!-- <div class="introduce-container">
          <div class="header">
            <i class="el-icon-edit" style="color: #fa0; font-size: 20px"></i>
            {{ `   帖子简介:` }}
          </div>
          <div class="introduce">
            <div class="cont">
              {{ postData.introduce }}
            </div>
          </div>
        </div> -->
      </div>
    </div>
  </div>
</template>

<script>
import sourceContainer from "./sourceContainer";
import sourceComments from "./sourceComments";
import report from "@/views/szptProjectPage/szptDataPage/report.vue";
import { getSpecificPostById } from "@/api/szpt/getSpecificPost";
import { parse_collect_concern } from "@/api/szpt/parse";

export default {
  name: "szSource",
  components: {
    sourceContainer,
    sourceComments,
    report,
  },
  data() {
    return {
      // 收藏
      collectFlag: false,
      // 关注
      focusFlag: false,
      // 喜欢状态
      likeFlag: false,
      // 关注按钮
      showFocusBtn: true,
      // 编辑器数据
      postData: {},
      // 登录用户数据
      loadUserData: {},
      // 单个帖子全部数据
      datas: {},
      countDTO: {
        // 评论数
        commentTotal: 0,
        // 收藏数
        collectTotal: 0,
        // 点赞量
        likeTotal: 0,
        // 阅读量
        readTotal: 0,
      },
      // 用户信息
      userDTO: {},
      // 用户名
      userName: "",
      mouduleId: "",
      // 个人中心跳转
      targetUserRoute: "szptPersonalCenter",
    };
  },
  methods: {
    // 改变收藏状态
    changeCollectFlag() {
      parse_collect_concern(this.$route.query.id, "SZPT_SZPOST_SYSUSER_COLLECT")
        .then((resp) => {
          if (resp.code === 200) {
            if (this.collectFlag) {
              this.countDTO.collectTotal = this.countDTO.collectTotal - 1;
              this.$message.success("已取消收藏！");
            } else {
              this.countDTO.collectTotal = this.countDTO.collectTotal + 1;
              this.$message.success("收藏成功！");
            }
            this.collectFlag = !this.collectFlag;
          } else {
            this.$message.error("收藏状态更新失败！");
          }
        })
        .catch((err) => {
          console.log("err", err);
        });
    },
    // 改变喜欢状态
    changeLikeFlag() {
      parse_collect_concern(this.$route.query.id, "SZPT_SZPOST_SYSUSER_LIKE")
        .then((resp) => {
          if (resp.code === 200) {
            if (this.likeFlag) {
              this.countDTO.likeTotal = this.countDTO.likeTotal - 1;
              this.$message.success("已取消点赞！");
            } else {
              this.countDTO.likeTotal = this.countDTO.likeTotal + 1;
              this.$message.success("点赞成功！");
            }
            this.likeFlag = !this.likeFlag;
          } else {
            this.$message.error("点赞状态更新失败！");
          }
        })
        .catch((err) => {
          console.log("err", err);
        });
    },
    // 改变关注状态
    changeFocusFlag(userId) {
      parse_collect_concern(userId, "SZPT_SYSUSER_SYSUSER_FOCUS")
        .then((resp) => {
          if (resp.code === 200) {
            if (this.focusFlag) {
              this.$message.success("已取消关注");
            } else {
              this.$message.success("关注成功!");
            }
            this.focusFlag = !this.focusFlag;
          } else {
            this.$message.error("状态更改失败!");
          }
        })
        .catch((err) => {
          console.log("err", err);
        });
    },
  },
  mounted() {
    // 获取当前帖子信息
    this.$modal.loading("玩命加载中....");
    getSpecificPostById(this.$route.query.id)
      .then((resp) => {
        if (resp.code == 200 && resp.data.data) {
          this.postData = { ...JSON.parse(resp.data.data.content) };
          this.datas = resp.data.data;
          setTimeout(() => {
            // 处理三连关系数据
            this.countDTO.attendShow = resp.data.actionFlagDTO.focusFlag;
            this.countDTO.collectFlag = resp.data.actionFlagDTO.collectFlag;
            this.countDTO.commentTotal = resp.data.countDTO.commentTotal;
            this.countDTO.collectTotal = parseInt(
              resp.data.countDTO.collectTotal
            );
            this.countDTO.likeTotal = parseInt(resp.data.countDTO.likeTotal);
            this.countDTO.readTotal = resp.data.countDTO.readTotal;

            // 处理所属板块
            this.mouduleId = resp.data.tagDTOList[0].data.id;

            // 处理用户关系数据
            this.userDTO = resp.data.userDTO.data;
            this.userName = this.userDTO.userName;
            this.likeFlag = resp.data.actionFlagDTO.likeFlag;
            this.collectFlag = resp.data.actionFlagDTO.collectFlag;
            this.focusFlag = resp.data.actionFlagDTO.focusFlag;
            this.loadUserData = this.$store.getters["userData/getUserDataMsg"];
            if (this.loadUserData.data.userId === this.userDTO.userId) {
              this.showFocusBtn = false;
            } else {
              this.showFocusBtn = true;
            }
          }, 500);
          this.$modal.closeLoading();
        }
      })
      .catch((err) => {
        console.log("err", err);
      });
    document.title = this.$route.query.title;
  },
};
</script>

<style scoped lang="scss">
.szSource-container {
  width: 100%;
  height: auto;
}
.src_container {
  width: 100%;
  height: auto;
  border-radius: 8px;
  padding: 10px;
  display: flex;
  min-height: 800px;
  .parse {
    width: 9%;
    height: 100%;
    background-color: rgb(255, 255, 255);
    .szpost-container {
      height: 320px;
      .item {
        width: 100%;
        height: 23%;
        margin-top: 5px;
        display: flex;
        justify-content: center;
        cursor: pointer;
        align-content: center;
        .item-list {
          width: 80%;
          height: 100%;
          border-bottom: 1px solid rgb(240, 238, 238);
          background-color: rgb(255, 255, 255);
          .icon {
            width: 100%;
            height: 70%;
            font-size: 40px;
            text-align: center;
            color: #999;
          }
          .count {
            text-align: center;
            color: #999;
          }
        }
      }
    }
  }
  .detail {
    width: 68%;
    margin-left: 20px;
    height: 100%;
  }
  .header {
    width: 20%;
    margin-left: 20px;
    height: auto;

    .header-container {
      display: flex;
      height: 180px;
      width: 100%;
      overflow: hidden;
      background-color: rgb(255, 255, 255);
      box-shadow: 5px 5px 5px #ececec;
      border-radius: 8px;
      .header-pic {
        height: 100%;
        width: 50%;
        display: flex;
        justify-content: center;
        align-items: center;
        .pic {
          width: 100px;
          height: 100px;
          overflow: hidden;
          border-radius: 50px;
          .pic {
            width: 100%;
            height: 100%;
            display: flex;
            justify-content: center;
            align-items: center;
            background-color: rgb(208, 208, 208);
          }
          img {
            width: 100%;
            height: 100%;
            object-fit: cover;
          }
        }
      }
      .name-attend {
        width: 40%;
        height: 100%;
        .name {
          width: 100%;
          height: 100px;
          line-height: 100px;
          text-align: left;
          font-weight: bold;
          font-size: 16px;
          color: #333;
          white-space: nowrap;
          text-overflow: ellipsis;
        }
        .name:hover {
          cursor: pointer;
          color: rgb(0, 195, 255);
        }
        .attend {
          width: 100%;
          display: flex;
          justify-content: center;
          align-content: center;
          .attend-btn {
            width: 100%;
            height: 40px;
            text-align: center;
            line-height: 40px;
            color: rgb(0, 195, 255);
            border-radius: 5px;
            cursor: pointer;
            font-weight: bold;
            border: 2px solid rgb(0, 195, 255);
          }
          .attend-btn-al {
            width: 100%;
            height: 40px;
            text-align: center;
            line-height: 40px;
            color: #b4b2b2;
            border-radius: 5px;
            cursor: pointer;
            border: 2px solid #b4b2b2;
          }
        }
      }
    }
    .introduce-container {
      width: 100%;
      height: auto;
      margin-top: 30px;
      //min-height: 500px;
      border-radius: 8px;
      overflow: hidden;
      background-color: rgb(255, 255, 255);
      .header {
        width: 100%;
        height: 40px;
        line-height: 40px;
        text-align: left;
        color: #333;
      }
      .introduce {
        width: 100%;
        height: auto;
        color: #666;
        display: flex;
        justify-content: center;
        align-content: center;
        padding-bottom: 20px;
        .cont {
          width: 80%;
          border-radius: 5px;
          overflow: hidden;
          padding: 5px;
          background-color: rgb(240, 238, 238);
        }
      }
    }
  }
}
.comments_container {
  width: 100%;
  height: auto;
  margin-top: 15px;
  border-radius: 8px;
}
</style>
